<template>
    <div class="body">
        <topNav></topNav>
        
      <div class="content">
        <div class="left">
            <img :src="imgUrl(goodsDict.img)" alt="">
        </div>

        <div class="right">
            <div class="name">{{ goodsDict.name }}</div>
            
            <div v-if="rush">
                <div class="price0">￥{{goodsDict.price}}</div>
            <div class="price" >￥{{goodsDict.rushprice}}</div>
            </div>
            <div v-else>
                <div class="price">￥{{goodsDict.price}}</div>
            </div>
            
            <input v-if="rush" class="btn" type="button" value="立即抢购" @click="uploadOrder" style="background-color: cornflowerblue;"/>
            <input v-else class="btn" type="button" value="立即购买" @click="uploadOrder"/>
        </div>


      </div>

      <div class="foot">

      </div>


    </div>
  </template>
  
  <script>
  import topNav from "@/components/topNav/topNav.vue"
  import {getHomeGoods, getRushGoods, selectTask} from "@/api/dataReq"
  import { req } from '@/api/basicReq'

  export default {
    name: 'Home',
    components: {topNav},
    data() {
      return {
        rush:null,
        goodsId:null,
        goodsDict:{},
        task_id:null,
        selectInterval:null,
      }
    },
    computed: {},
    created() {
        this.goodsId = this.$route.query.id
        this.rush = this.$route.query.rush
        if (this.rush){
            console.log(this.rush)
            this.getrushGoodsDict()
        }else{
            this.getgoodsDict()
        }
        
    },
    methods: {
        getgoodsDict(){
        var reqData = {
        id:this.goodsId
      }
      getHomeGoods(reqData).then(response => {
        if (response.code == '1') {
        //   console.log(response)
         this.goodsDict = response.data[0]
                  
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
      },
      getrushGoodsDict(){
        var reqData = {
        id:this.goodsId
      }
      getRushGoods(reqData).then(response => {
        if (response.code == '1') {
        //   console.log(response)
         this.goodsDict = response.data[0]
                  
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
      },
      imgUrl(imgPath){
        return cfg.img_url+imgPath+ '?' + Date.now()
        
    },
    uploadOrder(){
      if (this.task_id){
        // this.selectInterval = setInterval(this.getrushResult,5000);
      }else{

      
      // 提交订单
      if(this.rush){
        var formData={
          rushgoods:this.goodsDict.id,
          rush:1
        }

      }else{
        var formData={
          goods_id:this.goodsDict.id,

        }
        
      }
      var data = {
        url: 'goods/Order',
        method: 'post',
        data: formData
      }
      req(data)
        .then((res) => {
          if (res.code == '1') {
            // console.log(res)
            // console.log(formData)
            if(this.rush){
              this.task_id = res.data
              // console.log(this.task_id)
              this.$message.success('抢购中...')
              this.selectInterval = setInterval(this.getrushResult,5000);
            }
            else{
              this.$message.success('购买成功')
            }
            
           
          }
        })
        .catch()
      }
    },

    getrushResult(){
      var reqData = {
        task_id:this.task_id
      }
      selectTask(reqData).then(response => {
        if (response.code == '1') {
          var retData = response
          if (retData.data=='1'){
            this.$message.success('抢购成功')
            clearInterval(this.selectInterval)
            this.task_id = null
          }
          else{
            this.$message.success('抢购中.......')
          }
                  
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
    },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .body{
    background: linear-gradient(rgb(191, 227, 241), rgb(213,213,213));
    // height: 600px;
    min-height: 100vh;
    

  }
  .content{
    width: 1190px;

    // height: 1000px;
    // border: red 1px solid;
    // align-content: center;
    margin: auto;
    // margin-bottom: 60px;
    // padding-bottom: 60px;
    background-color: #FFFFFF;
    // background-color: rebeccapurple;
    border-radius:20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-shrink: 0;
    align-content: flex-start;
    flex-wrap:nowrap;
    margin-top: 50px;
    // display: flex;
    // justify-content: center;
    // align-items: center;

  }
  .left{
    width: 500px;
    height: 500px;
    margin-top: 20px;
    margin-left: 20px;
    img{
        max-width: 460px;
        max-height: 460px;
        border-radius:20px;
    }
  }
  .right{
    width: 580px;
    height: 500px;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    
    // border: red 1px solid;
    div{
        margin-top: 20px;
    }
    
  }
  .price{
        color: red;
    }
.price0{
    color: gray;
    text-decoration: line-through;
}
  .btn{
        width: 80px;
        height: 39px;
        position: relative;
        border:none;
        border-radius:36px;
        background-color: rgb(255,80,0);
        color: #FFFFFF;
        font-size: 16px;
        margin-top: 20px;
        cursor: pointer;
        
      }
    
</style>